<template>
  <div class="q-pa-sm">
    <div class="q-col-gutter-sm row items-start">
      <!--        Loading-->
      <q-linear-progress stripe indeterminate style="height: 1px" v-show="loading"/>
      <!--        toolbar-->
      <q-toolbar class="text-primary">
        <q-btn flat round dense icon="home" @click="foldnflyTitlesShow=true"/>
        <q-toolbar-title>
          {{langCn?'iNeed.foldnfly':'纸飞机'}}
        </q-toolbar-title>
        <q-btn flat round dense  @click="langCn=!langCn" label="中/EN"/>
      </q-toolbar>
    </div>
    <div class="q-col-gutter-sm row items-start"  v-show="foldnflyTitlesShow">
      <div class="col-6" v-for="title in foldnflyTitles" v-bind:key="title.id">
        <q-img
          :src="baseUrl+'/foldnfly/queryFoldnflyTitleImg?id='+title.id"
          style="width: 100%"
          placeholder-src=""
          @click="showDesin(title)"
        >
          <div class="absolute-bottom text-subtitle1 text-center">
            {{langCn?title.foldnflyNameCn:title.foldnflyName}}
          </div>
        </q-img>
      </div>
    </div>
    <div class="q-col-gutter-sm row items-start"  v-show="!foldnflyTitlesShow">
      <div class="col-12">
        <q-card flat bordered class="my-card">
          <q-card-section>
            <div class="text-h6">{{langCn?foldnflyTitle.foldnflyNameCn:foldnflyTitle.foldnflyName}}</div>
          </q-card-section>
          <q-card-section class="q-pt-none">
            {{langCn?foldnflyTitle.foldnflyDescCn:foldnflyTitle.foldnflyDesc}}
          </q-card-section>
          <q-separator inset />
          <q-card-section>
            {{langCn?foldnflyTitle.foldnflyDesc2Cn:foldnflyTitle.foldnflyDesc2}}
          </q-card-section>
        </q-card>
      </div>
      <div class="col-6" v-for="desin in foldnflyDesins" v-bind:key="desin.id">
        <q-img
          :src="baseUrl+'/foldnfly/queryFoldnflyDesignImg?id='+desin.id"
          style="width: 100%"
          placeholder-src=""
        >
        </q-img>
            <p v-html='langCn?desin.foldnflyDesignDescCn:desin.foldnflyDesignDesc'/>
      </div>
      </div>
    </div>
</template>
<script>
import axios from 'axios'
// import { Cookies } from 'quasar'

export default {
  name: 'foldnfly',
  data () {
    return {
      loading: true,
      foldnflyTitlesShow: true,
      foldnflyTitles: [],
      baseUrl: axios.defaults.baseURL,
      foldnflyTitle: {},
      foldnflyDesins: [],
      langCn: false
    }
  },
  watch: {
  },

  mounted () {
    this.queryAllFoldnflyTitleBase()
  },
  destroyed () {
  },
  methods: {
    queryAllFoldnflyTitleBase () {
      const _this = this
      axios({
        url: '/foldnfly/queryAllFoldnflyTitleBase'
      }).then(res => {
        if (res.data.state === 'success') {
          _this.foldnflyTitles = res.data.obj
        }
      }).catch(() => {
        _this.$q.notify({
          message: '服务异常'
        })
      }).finally(() => {
        _this.loading = false
      })
    },
    showDesin (title) {
      const _this = this
      _this.foldnflyTitle = title
      axios({
        url: '/foldnfly/queryAllFoldnflyDesignBase?titleId=' + title.id
      }).then(res => {
        if (res.data.state === 'success') {
          _this.foldnflyTitlesShow = false
          _this.foldnflyDesins = res.data.obj
        }
      }).catch(() => {
        _this.$q.notify({
          message: '服务异常'
        })
      }).finally(() => {
        _this.loading = false
      })
    }
  }

}
</script>

<style scoped>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .block {
    width: 200px;
    height: 120px;
    color: #fff;
  }
</style>
